<template>
  <div class="feature-wrapper">
    <n-space>
      <n-button
        @click="handleDeleteAll"
        size="small"
        strong
        secondary
        type="error"
        >全部删除</n-button
      >
      <n-input size="small" placeholder="搜索点位名称"></n-input>
    </n-space>
    <n-data-table
      style="
        height: calc(100% - 34px);
        box-sizing: border-box;
        margin-top: 10px;
      "
      :bordered="false"
      :columns="columns"
      :data="featureData"
      :pagination="false"
      flex-height
    />
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, reactive, computed, h } from "vue";
import { useMapStore } from "@/store/map";
import { useEventBus } from "@vueuse/core";
import { NButton, useDialog, useMessage, NSpace } from "naive-ui";
//@ts-ignore
import WKT from "terraformer-wkt-parser";
import { deleteAllFeature, deleteFeature } from "@/api";
const dialog = useDialog();
const mapBus = useEventBus("map");
const mapStore = useMapStore();
const features = ref([]);
const featureData = computed(() => {
  return features.value.map((feature) => {
    return {
      id: feature.id,
      name: feature.name,
      updateTime: feature.updateTime,
      ...feature.properties,
    };
  });
});
const message = useMessage();
const pagination = reactive({
  page: 1,
  pageSize: 200,
  showSizePicker: true,
  pageSizes: [5, 50, 200],
  onChange: (page: number) => {
    pagination.page = page;
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
  },
});
const propColumns = ref([]);
const columns = computed(() => [
  {
    title: "ID",
    key: "id",
  },
  {
    title: "名称",
    key: "name",
    render: (row) => {
      return h(
        NButton,
        {
          text: true,
          onClick() {
            // console.log(row);
            // console.log(row.center);
            const point = row.center;
            // console.log(point);
            mapStore.selectFeature = row.pid;
            mapStore.configType = "feature";
            mapBus.emit({
              type: "flyTo",
              value: {
                center: point.coordinates,
              },
            });
          },
        },
        {
          default: () => {
            return row.name;
          },
        }
      );
    },
  },
  // {
  //   title: "坐标",
  //   key: "center",
  // },
  {
    title: "更新时间",
    key: "updateTime",
    width: 180,
  },
  ...propColumns.value,
  {
    title: "操作",
    key: "option",
    render: (row) => {
      return h(
        NSpace,
        {},
        {
          default: () => [
            h(
              NButton,
              {
                type: "error",
                size: "small",
                secondary: true,
                stronger: true,
                onClick() {
                  console.log(row);
                  deleteFeature(row.id).then((res) => {
                    message.success("删除成功");
                    features.value = features.value.filter(
                      (item) => item.id != row.id
                    );
                  });
                },
              },
              { default: () => "删除" }
            ),
          ],
        }
      );
    },
  },
]);
// const features = computed(() => {
//   const layer = mapStore.layers.find(
//     (item: { pid: string }) => item.pid == mapStore.selectLayer
//   );
//   alert();
//   if (layer) {
//     console.log(layer.features);
//     return layer.features;
//   } else {
//     return [];
//   }
// });
watch(
  () => mapStore.selectLayer,
  (val) => {
    const layer = mapStore.datasetInfo.layers.find(
      (item) => item.pid == mapStore.selectLayer
    );
    propColumns.value = layer.columns.map((item) => {
      return {
        title: item.name,
        key: item.key,
        render: (row) => {
          if (item.type == "select") {
            return (
              item.options.find((subItem) => subItem.value == row[item.key])
                ?.key || "--"
            );
          } else {
            return row[item.key];
          }
        },
      };
    });
    mapStore.drawMode = layer.type;
    features.value = layer.features;
  },
  {
    immediate: false,
  }
);
const handleDeleteAll = () => {
  dialog.error({
    title: "清空警告",
    content: "此举将会删除当前所有点位数据,请确认",
    positiveText: "确定删除",
    negativeText: "取消",
    onPositiveClick: () => {
      deleteAllFeature(features.value.map((item) => item.id))
        .then((res) => {
          message.success("删除成功");
        })
        .catch((e) => {
          message.error("删除失败");
        });
      features.value = [];
      // message.success("确定");
    },
    onNegativeClick: () => {
      // message.error("不确定");
    },
  });
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
.feature-wrapper {
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 12px;
}
</style>
